<template>
    <div class="offer">
        <div>
            <van-nav-bar :title="$t('ecology.off')" leftArrow @click-left="_return" />
            <div class="offerMain">
                <div class="choose">
                    <p>{{$t('ecology.choose')}}</p>
                    <ul>
                        <li v-for="item in price"   @click.stop="addPrice(item,$event)">
                            <div class="newscla"><span style="margin-top: 10px;color:#2bc49b;font-weight: bold">{{item.node_name}}</span></div> <p>{{item.value}} <span>USDT </span> <span v-if="item.value == 15000">+</span><br/>
                            <span class="residue"> {{$t('ecology.surplus')}}{{item.day_count}}</span></p>
                        </li>
                    </ul>
                </div>
                <div class="pay" v-if="selfselect">
                    <p>其他金额</p>
                    <div class="clearfix">
                        <input class="otherbox"  v-model="turn.input" @input="inputF" type="number" >
                        <p class="rightp">USDT</p>
                    </div>
                </div>
                <div class="pay">
                    <div class="clearfix">
                        <p>
                            <span>{{$t('ecology.pay')}}</span>
                             <van-icon style="float: right;margin-top: 10px;margin-right:10px" name="arrow-down" />
                            <span class="rightspna" @click="typeShow"><span>{{$t('ecology.selects')}}： </span>{{nowSelect}}</span>
                        </p>
                    </div>
                    <div class="payMain login">
                        <van-field v-model="turn.us" :label="$t('ecology.pay_us')" @input="press"  input-align="right" :placeholder="mix"><p slot="button">{{nowSelect}}</p></van-field>
                        <van-field v-model="turn.zn" :label="$t('ecology.pay_us')" readonly input-align="right" ><p slot="button">AAT</p></van-field>
                    </div>
                    <span>{{$t('ecology.now')}}<b>{{rate}}</b> AAT/{{nowSelect}}</span>
                </div>
                <div class="payBtn">
                    <van-row type="flex" align="center">
                        <van-col :span="16">
                            <p>{{$t('ecology.total')}}</p>
                            <p v-show="turn.us || turn.zn"><span>{{turn.us}}</span> {{nowSelect}} + <span>{{turn.zn}}</span>AAT</p>
                        </van-col>
                        <van-col :span="8">
                            <button class="btn" @click="submit">{{$t('pay.button')}}</button>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </div>
        <van-popup v-model="pwdShow" position="bottom" :overlay="true">
            <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="pwdShow = false"/>
            <div class="pwdMain login">
                <van-cell-group>
                    <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                </van-cell-group>
                <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                <div class="btns">
                    <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="typeShows" position="bottom" :overlay="true">
            <van-picker show-toolbar :title="$t('info.coins')" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>
        <transition name="bounce">
            <div class="dialog" v-if="signShow">
                <div class="dialogMain">
                    <p class="pay">{{$t('node.paySucc')}}</p>
                    <img :src="coin" alt="">
                    <span>{{$t('node.hope')}}</span>

                    <div class="btns">
                        <button class="btn" @click="getPat">{{$t('common.confirm')}}</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                price:[],
                turn:{
                    us:'0.0000',
                    zn:'0.0000',
                    input:'0.0000'
                },
                pwdShow:false,
                payPassword:'',
                rate:0,
                mix:this.$t('ecology.mix'),
                current:0,
                signShow:false,
                coin:require('../../assets/coins.png'),
                select_id:0,
                selfselect:false,
                columns: ['USDT', 'ETH'],
                typeShows:false,
                nowSelect:'USDT',
                AAT:"",
                ETH:'',
                list:[
                    {name:this.$t('ecology.l1')},
                    {name:this.$t('ecology.l2')},
                    {name:this.$t('ecology.l3')},
                    {name:this.$t('ecology.m1')},
                    {name:this.$t('ecology.m2')},
                    {name:this.$t('ecology.h1')},
                    {name:this.$t('ecology.h2')},
                ]
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getAAT(){
                this.$api.post('index/index')
                    .then(res =>{
                        console.log(res)
                        var AAT=res.detail.price.AAT
                        var ETH=res.detail.price.ETH
                        this.AAT=AAT
                        this.ETH=ETH
                    })
            },
            addPrice(price,dom){
                var that=this
                if(price.value == '15000'){
                    this.selfselect=true
                    this.turn.input=15000
                }else{
                    this.selfselect=false
                    this.turn.input=15000
                }
                this.current = Number(price.value/2)
                let box = dom.target
                if(box.tagName.toLowerCase() === 'p'){
                    box = box.parentNode
                }
                if(box.tagName.toLowerCase() === 'span'){
                    box = box.parentNode.parentNode
                }
                this.select_id=price.id;
                let child = box.parentNode.childNodes
                child.forEach(item => item.classList.remove('active'))
                box.classList.add('active')
                this.mix = this.$t('ecology.mix').replace(/5000/g,Number(price.value/2))
                var nowSelect=this.nowSelect
                if(nowSelect == "USDT"){
                    that.turn.us=Number(price.value/2);
                    // that.turn.input=Number(price.value);
                    if(that.rate < 1){
                        that.turn.zn=(Number(price.value/2)/that.rate).toFixed(4);
                    }else{
                        that.turn.zn=(Number(price.value/2)*that.rate).toFixed(4);
                    }
                }else{
                    if(that.rate < 1){
                        that.turn.us=Number(price.value/2*that.rate).toFixed(4);
                         that.turn.zn=(Number(price.value/2/this.AAT)).toFixed(4);
                    }else{
                        that.turn.us=Number(price.value/2/that.rate).toFixed(4);
                        that.turn.zn=(Number(price.value/2)/this.AAT).toFixed(4);
                    }
                }
            },
            typeShow(){
                this.typeShows = true
            },
            onCancel(){
                this.typeShows = false
            },
            onConfirm(data){
                var that=this
                console.log(data)
                this.nowSelect=data
                if(data == 'USDT'){
                    this.rate=this.AAT
                }else{
                    this.rate=this.ETH
                }
                var index=this.select_id
                console.log(index);
                var list=this.price
                console.log(list)
                var price=''
                for(var i=0;i<list.length;i++){
                    if(list[i].id == index){
                        price=list[i].value
                    }
                }
                console.log(price)
                var nowSelect=this.nowSelect
                if(nowSelect == "USDT"){
                    that.turn.us=Number(price/2);
                    if(that.rate < 1){
                        that.turn.zn=Number((Number(price/2)/that.rate).toFixed(4));
                    }else{
                        that.turn.zn=Number((Number(price/2)*that.rate).toFixed(4));
                    }
                }else{
                    if(that.rate < 1){
                        that.turn.us=Number(Number(price/2*that.rate).toFixed(4));
                         that.turn.zn=Number((Number(price/2/this.AAT)).toFixed(4));
                    }else{
                        that.turn.us=Number(Number(price/2/that.rate).toFixed(4));
                        that.turn.zn=Number((Number(price/2)/this.AAT).toFixed(4))
                    }
                }
                this.onCancel()
            },
            inputF(prcie){
                var price=this.turn.input
                console.log(price)
                var nowSelect=this.nowSelect
                var that=this
                if(nowSelect == "USDT"){
                    that.turn.us=Number(price/2);
                    if(that.rate < 1){
                        that.turn.zn=(Number(price/2)/that.rate).toFixed(4);
                    }else{
                        that.turn.zn=(Number(price/2)*that.rate).toFixed(4);
                    }
                }else{
                    if(that.rate < 1){
                        that.turn.us=(Number(price/2/this.ETH)).toFixed(4);
                         that.turn.zn=(Number(price/2/this.AAT)).toFixed(4);
                    }else{
                        that.turn.us=(Number(price/2/this.ETH)).toFixed(4);;
                        that.turn.zn=(Number(price/2)/this.AAT).toFixed(4);
                    }
                }
                // this.mix = this.$t('ecology.mix').replace(/5000/g,Number(this.turn.us/2))
                // if(this.rate < 1){
                //     this.turn.zn=(Number(price.value/2)/this.rate).toFixed(6);
                // }else{
                //     this.turn.zn=(Number(price.value/2)*this.rate).toFixed(6);
                // }
            },
            forgetPwd(){},
            submitMove(){
                let param = {
                    level:this.current*2,
                    paypassword:this.payPassword,
                    usdtval:this.turn.us,
                    select_id:this.select_id,
                    coin:this.nowSelect
                }
                this.$api.post('node/nodeBuy',param)
                    .then(res =>{
                        this.pwdShow = false
                        this.payPassword = ''
                        this.signShow = true
                    })
            },
            myIsNaN(value) {
                console.log(typeof value)
                return  !isNaN(value);
            },
            getPat(){
                this.signShow = false
                this._return()
            },
            getData(){
                var that=this
                var namelist=that.list
                this.$api.post('node/index')
                    .then(res =>{
                        console.log(res.detail)
                        var list=res.detail.list
                        console.log(namelist)
                        //这一步本地变成翻译
                        for(var i=0;i<list.length;i++){
                            list[i].node_name=namelist[i].name
                        }
                        this.price = list
                        // this.rate = Number(1)/Number(res.detail.rate)
                    })
                var   nowSelect=this.nowSelect
                this.$api.post('index/index')
                    .then(res =>{
                        console.log(res)
                        var AAT=res.detail.price.AAT
                        var ETH=res.detail.price.ETH
                        this.AAT=AAT
                        this.ETH=ETH
                        if(nowSelect == 'USDT'){
                            this.rate=AAT
                        }else{
                            this.rate=ETH
                        }
                    })
            },
            submit(){

                if(this.select_id===0){
                    this.$toast("请选择兑换的等级")
                    return ;
                }
                if(!this.myIsNaN(this.turn.us)){
                    this.$toast("请输入正确的数字！")
                    this.turn.us=0;
                    this.turn.zn=0;
                    return
                }
                var price=this.turn.input
                if(this.turn.input< '15000'){
                    this.$toast('最少需要15000USDT');
                    return
                }
                console.log(this.turn.us)
                this.pwdShow = true
            },
            press(){
                if(this.current === 0){
                    this.$toast(this.$t('ecology.level'))
                    return
                }
                if(this.turn.us===''){
                    this.turn.us=this.current;
                }
                if(Number(this.turn.us) < this.current*2){
                    let val = this.current*2 - Number(this.turn.us)
                    this.turn.zn = (this.rate*val).toFixed(4)
                }else{
                    this.turn.zn = 0
                }
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            // this.getAAT();

        },
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .rightspna
        color #115f49 !important
        margin-left 40px !important
        float right
    .otherbox
            width 80%
            border none
            border-bottom 1px solid #ebebeb
            margin-top 20px
            background none
            padding-left 20px
            box-sizing border-box
            float left
    .residue
        line-height 30px !important
        color #666
    .rightp
        float left
        margin-top 20px
        text-align center
        width 20%
    .active
        background:linear-gradient(180deg, #54d8b4, #26c196)
        color #fff !important
    .dialog{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        /*opacity: 0.4;*/
        z-index: 110;
        .dialogMain{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 72%;
            transform: translateX(-50%)translateY(-50%);
            .pay{
                color #D8D8D8
                font-size 16px
                text-align center

                z-index: 111;
            }
            img{
                width 105px
                margin 20px auto 0
                display block
            }
            span{
                color #898989
                font-size 12px
                margin-top 5px
                display block
                text-align center
            }
            .add{
                font-size 24px
                color #CBAF89
                text-align center
                margin-top 5px
            }
            .btns{
                margin 20px auto 0
                display flex
                justify-content center
                .btn{
                    width 45%
                }
            }
        }
    }
    .offerMain
        width 94%
        margin 0 auto
        .choose
            margin-top 5px
            p
                color #333
            ul
                display flex
                justify-content space-between
                flex-flow row wrap
                li
                    width 49%
                    height 60px
                    border 1px solid #ebebeb
                    text-align center
                    margin-top 8px
                    padding-top 15px
                    p
                        color #333
                        font-size 18px
                        span
                            color #115f49
                            font-size 12px

        .pay
            margin-top 15px
            background #fff
            p
                color #333
            .payMain
                margin-top 3px
                padding-bottom 15px
                border-radius 0px
                .van-cell
                    background none
                    border-radius 0px 5px 0 0
                    color #333
                    border-bottom 1px solid #ebebeb
                    box-sizing border-box
                    overflow visible !important
                    .van-field__button p
                        color font
                .van-cell:not(:last-child)::after
                    border none
                .van-cell
                    border-bottom 1px solid #ebebeb
                    box-sizing border-box
                .confirm
                    width 94%
                    margin 13px auto 0
                    p
                        font-size 14px
                        color #D8D8D8
                    .btn
                        margin-top 5px
                        color #000



            span
                color #898989
                font-size 12px
                margin-top 5px
                margin-left 10px
                display inline-block
                b
                    font-weight normal
                    color #f6543e
        .payBtn
            position fixed
            bottom 0
            height 75px
            width 100%
            left:0
            background:#fff
            box-shadow:0px -4px 6px 0px rgba(0,0,0,0.2);
            .van-row
                height 75px
            .van-col--16
                p
                    color #333
                    margin-left 10px
                    &:last-child
                        margin-top 10px
                        font-size 12px
                        color #898989
                        span
                            font-size 16px
                            color #f6543e



            .van-col--8
                display flex
                justify-content center
                .btn
                    width 90%
                    height 40px

    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
        }
        p{
            text-align: center;
            color: #54d8b4;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            color: #54d8b4;
            overflow visible !important
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                background:linear-gradient(180deg, #54d8b4, #26c196);
                color #fff;
                border: none;
                /*margin-left: 5%;*/
            }
        }
        .otherbox{
            width 100%
        }
    }
    li> .newscla{
        float left;
        width 40%;
        height 100%
    }
    li.active> .newscla span{
        color #d2ffed !important
    }

</style>